<template>
	<view>

		<view class="flex-col page">

			<view class="flex-col group_2">
				<view class="flex-row items-center group_3">
					<view class="section_3"></view>
					<text class="font text_3 ml-11">当前晋升进度</text>
				</view>
				<view class="flex-col section_4">
					<view v-if="report&&report.id">

						<u-cell-group :border="false">

							<u-cell title="是否通过">
								<text slot="value" class="u-slot-value"
									style="font-size: 32rpx; color: #ff0101; font-weight: bold;">{{report.passed?'通过':'未通过'}}</text>

							</u-cell>
							<u-cell title="评估区间"
								:value="`${formatDate2(report.range.start)}~${formatDate2(report.range.end)}`"></u-cell>
							<u-cell title="评估角色" :value="getLevel(report.targetRole)"></u-cell>
							<u-cell title="当前业绩" v-if="report.groupPvSpec&&report.groupPvSpec>0">
								<view slot="value">
									<text>{{report.groupPv}}</text><text>/</text><text>{{report.groupPvSpec}}</text>
								</view>

							</u-cell>
							<u-cell title="夹心超越">
								<text slot="value" class="u-slot-value"
									style="">{{report.superSupported?'是':'否'}}</text>

							</u-cell>
							<u-cell :title="report.primaryStructureDescription"
								v-if="report.primaryStructureDescription&&report.primaryStructureSpec">
								<view slot="value">
									<text>{{report.primaryStructureMatched}}</text><text>/</text><text>{{report.primaryStructureSpec}}</text>
								</view>
							</u-cell>

							<u-cell :title="report.secondaryStructureDescription"
								v-if="report.secondaryStructureDescription&&report.secondaryStructureSpec">
								<view slot="value">
									<text>{{report.secondaryStructureMatched}}</text><text>/</text><text>{{report.secondaryStructureSpec}}</text>
								</view>
							</u-cell>
							<u-cell title="报告生成时间" :border="false" :value="formatDate(report.createdAt)"></u-cell>
						</u-cell-group>
						<view class="flex-row justify-center items-center mt-10" v-if="report.passed">
							<button size="mini" style="background-color: #ff0101;" type="primary"
								v-if="canApply(report.targetRole)"
								@click="goApply(report)">{{getButtonName(report.targetRole)}}</button>
						</view>
					</view>
					<view v-else style="padding: 20rpx;font-size: 28rpx;color:#757575">
						{{report.message}}
					</view>

					<!-- 	<view class="flex-row group_4">
						<view class="flex-row">
							<text class="font_2 text_6">所属店铺:</text>
							<text class="ml-8 font_2 text_7">{{part.secondSeller.user.nickname}} </text>
							<text class=" font_2 text_7"> ({{getLevel(part.secondSeller.highestRole)}})</text>
						</view>
					</view>
					<view class="mt-6 flex-row group_4">
						<view class="flex-row items-baseline ">
							<text class="font_2 text_10" style="padding-left:28px">单数:</text>
							<text class="font_3 text_9 ml-5">{{part.orderCount}}</text>
						</view>
						<view class="flex-row items-baseline ml-119">
							<text class="font_2 text_10">销售业绩:</text>
							<text class="font_3 ml-5">{{part.salesPv}}</text>
						</view>
					</view>
					<view class="mt-6 flex-row group_4">
						<view class="flex-row items-baseline ">
							<text class="font_2 text_10">自营利润:</text>
							<text class="font_3 text_9">{{part.salesProfit}}</text>
						</view>
						<view class="flex-row items-baseline ml-119">
							<text class="font_2 text_10">总销售额:</text>
							<text class="font_3 ml-5">{{part.totalAmount}}</text>
						</view>
					</view>
					<view class="mt-6 flex-row group_4">
						<view class="flex-row items-baseline ">
							<text class="font_2 text_10">上交金额:</text>
							<text class="font_3 text_9">{{part.handOutMoney}}</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="flex-col group_5">
				<view class="flex-row items-center group_6">
					<view class="section_3"></view>
					<text class="font ml-11">月度业绩达标情况</text>
				</view>
				<view class="flex-col section_5" v-if="month.data&&month.data.length>0">
					<view class="flex-row " style="font-size: 28rpx ;color: #757575; padding: 5px 0;">
						<view style="flex: 1; text-align:center;">
							月份
						</view>
						<view style="flex: 2; text-align: center;">
							业绩
						</view>
						<!-- 				<view style="flex: 1; text-align: center;">
							业绩达标额
						</view> -->
						<view style="flex: 1; text-align: center;">
							是否完成
						</view>

					</view>
					<view class="flex-row   items-center self-stretch group_7 " v-for="part in month.data"
						style="font-size: 28rpx; color: #757575;">
						<view style="flex: 1; text-align:center;">
							{{formatMonth(part.month)}}
						</view>
						<view style="flex: 2; text-align: center;">
							{{part.monthlyPv}}/{{part.spec}}
						</view>
						<view style="flex: 1; text-align: center;">
							{{part.complete?'是':'否'}}
						</view>

					</view>
				</view>
				<view class="flex-col section_5" v-else style="padding: 20rpx;font-size: 28rpx;color: #757575;">
					{{month.message}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				report: {},
				month: {},
			};
		},
		onLoad() {

			this.getCondition();
			this.getMonthlyPv()
		},
		methods: {
			canApply(myRoles) {
				let t = ['AG_WHS', 'AG_AGENT', 'MANAGER']

				if (t.indexOf(myRoles) != -1) {
					return true
				} else {
					return false
				}
			},
			goApply(item) {
				uni.navigateTo({
					url: `/pages-users/ApplyShop/ApplyShop?id=${item.id}&level=${item.targetRole}`
				})
			},
			getButtonName(role) {
				return `申请成为【${this.$Utils.getUserLevel(role)}】`
			},
			formatDate(date) {
				return this.$Utils.formatDate(date, 'yyyy-MM-dd HH:mm:ss')
			},
			formatDate2(date) {
				return this.$Utils.formatDate(date, 'yyyy-MM-dd')
			},
			formatMonth(date) {
				return this.$Utils.formatDate(date, 'yyyy年MM月')
			},
			cancelSearch() {
				this.isShowPopup = false;
			},
			hidDate() {

				this.showBeginDate = false;
				this.showEndDate = false;
			},
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},
			showBegin() {

				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = true;

			},
			showEnd() {
				this.showEndDate = true;

			},
			confirmBegin(e) {

				console.log(e)
				this.value1 = e.value;
				this.start = new Date(e.value)
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			confirmEnd(e) {
				this.value2 = e.value;

				this.end = new Date(e.value)
				this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			getCondition() {

				this.$get({
					url: `${this.$Utils.ApiUrl}/promotion/condition`
				}).then(res => {
					console.log(res);
					this.report = res;
				})
			},
			getMonthlyPv() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/monthlyPv/condition`
				}).then(res => {
					console.log(res);
					this.month = res;
				})
			}

		},
	};
</script>

<style scoped lang="scss">
	.ml-9 {
		margin-left: 15.7rpx;
	}

	.ml-11 {
		margin-left: 19.19rpx;
	}

	.ml-51 {
		margin-left: 88.95rpx;
	}

	.ml-119 {
		margin-left: 207.56rpx;
	}

	.ml-5 {
		margin-left: 8.72rpx;
	}

	.group {

		.text-wrapper {
			padding: 136.05rpx 0 27.91rpx;

			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text {
				margin-right: 167.44rpx;
				color: #000000;
				font-size: 31.4rpx;
				font-family: SourceHanSansCN;
				line-height: 29.9rpx;
			}
		}

		.section {
			padding: 19.19rpx 0 12.21rpx;
			background-color: #ffffff;

			.section_2 {
				margin: 0 8.72rpx;
				padding: 10.47rpx 22.67rpx;
				background-color: #f6f6f6;
				border-radius: 27.91rpx;

				.image {
					width: 34.88rpx;
					height: 34.88rpx;
				}

				.text_2 {
					color: #757575;
					font-size: 28.42rpx;
					font-family: SourceHanSansCN;
					line-height: 29.65rpx;

				}
			}
		}
	}

	.page {
		background-color: #f6f6f6;
		width: 100%;

		.group_2 {
			margin-top: 15.7rpx;

			.group_3 {
				padding: 0 17.44rpx 15.7rpx;

				.text_3 {
					line-height: 22.57rpx;
				}
			}

			.section_4 {
				padding: 20.93rpx 17.44rpx 24.42rpx;
				background-color: #ffffff;

				.group_4 {
					padding: 10rpx 3.49rpx;

					.font_2 {
						font-size: 28.42rpx;
						font-family: SourceHanSansCN;
						line-height: 22.6rpx;
						color: #888888;
					}

					.text_4 {
						line-height: 22.47rpx;
					}

					.font_3 {
						font-size: 24.42rpx;
						font-family: SourceHanSansCN;
						line-height: 18.54rpx;
						color: #e33c64;
					}

					.text_5 {
						color: #555555;
					}

					.text_6 {
						line-height: 22.52rpx;
					}

					.text_7 {
						color: #555555;
						line-height: 22.4rpx;
					}

					.text_8 {
						line-height: 22.78rpx;
					}

					.text_9 {
						margin-left: 6.98rpx;
					}

					.text_10 {
						line-height: 22.22rpx;
					}

					.text_11 {
						line-height: 22.78rpx;
					}

					.text_12 {
						margin-left: -6.98rpx;
					}

					.text_13 {
						line-height: 22.73rpx;
					}
				}
			}
		}

		.group_5 {
			margin-top: 59.3rpx;

			.group_6 {
				padding: 0 22.67rpx 19.19rpx;
			}

			.section_5 {
				padding-top: 20.93rpx;
				background-color: #ffffff;

				.text_14 {
					margin-left: 34.88rpx;
					line-height: 29.65rpx;
					width: 95.93rpx;
				}

				.group_7 {
					padding: 20.93rpx 0rpx;
					border-top: solid 1.74rpx #e0e0e0;

					.text_15 {
						line-height: 22.03rpx;
					}

					.text_16 {
						line-height: 27.23rpx;
					}

					.font_4 {
						font-size: 24.42rpx;
						font-family: SourceHanSansCN;
						line-height: 18.54rpx;
						color: #000000;
					}

					.text_17 {
						line-height: 18.51rpx;
					}

					.text_18 {
						line-height: 18.51rpx;
					}

					.text_19 {
						line-height: 18.51rpx;
					}
				}
			}
		}

		.section_3 {
			background-color: #ff0101;
			border-radius: 3.49rpx;
			width: 6.98rpx;
			height: 36.63rpx;
		}

		.font {
			font-size: 28.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.6rpx;
			color: #000000;
		}
	}
</style>